<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-left mt-3">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/"><i class="feather icon-home"></i></a></li>
                        <li class="breadcrumb-item active">系统设置</li>
                        <li class="breadcrumb-item active">封面设置</li>
                    </ol>
                </div>
            </div>
        </div>

        <div class="col-xl-8 col-md-12">
            <div class="card mb-0">
                <div class="card-header">
                    <h5>封面图片<small class="text-danger">&emsp;默认：可最多5张，每次访问博客随机显示其中一张。</small></h5>
                </div>
                <div class="card-body">
                    <div id="cupload-create"></div>
                </div>
            </div>
            <div class="card tailor-card">
                <div class="card-header">
                    <h5>裁剪后图片<small class="text-danger">&emsp;注意：如果对图片二次裁剪，请删除原图片封面重新裁剪！</small></h5>
                </div>
                <div class="card-body">
                    <div id="cupload-tailor" class="clearfix"></div>
                </div>
                <div class="modal-footer">
                    <button onclick="uploadCovers()" type="button" class="btn btn-primary">
                        <span class="ion ion-md-cloud-upload" id="upload-icon"></span>
                        <span class="spinner-border spinner-border-sm mr-1 d-none" id="upload-spin" role="status" aria-hidden="true"></span>
                        &nbsp;&nbsp;上传封面</button>
                    <button onclick="removeCovers()" type="button" class="btn btn-danger">
                        <span class="dripicons-trash"></span>
                        &nbsp;&nbsp;重置</button>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-12">
            <div class="card ui-activity-card">
                <div class="card-body">
                    <h4 class="mt-0 mb-3">注意事项：</h4>
                    <div class="ui-activity-list">
                        <div class="row py-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-success update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">封面大小</h5>
                                <p class="mb-0">裁剪后的封面为：600 * 1500。</p>
                            </div>
                        </div>
                        <div class="row pb-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-warning update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">显示封面</h5>
                                <p class="mb-0">支持最大5张图片，每次随机选取一张。</p>
                            </div>
                        </div>
                        <div class="row pb-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-primary update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">重置封面</h5>
                                <p class="mb-0">重置后上传封面会更新图片封面。</p>
                            </div>
                        </div>
                        <div class="row pb-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-success update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">图片地址</h5>
                                <p class="mb-0">默认我们图片都存放在七牛云。</p>
                            </div>
                        </div>
                        <div class="row pb-2">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-danger update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">默认显示</h5>
                                <p class="mb-0">没用户没有封面记录会采用默认封面。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
</div>